<!DOCTYPE html>
<!-- saved from url=(0022)https://mt.meipai.com/ -->
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    
        <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">

        <meta name="keywords" content="格子">
        <meta name="description" content="超好用的JK专属设计工具！免费格距色卡！">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <title>格子酱</title>

        <link rel="shortcut icon" href="static/favicon.ico">
        <style type="text/css">
            @charset "UTF-8";
            html, body, div, span, applet, object, iframe,
            h1, h2, h3, h4, h5, h6, p, blockquote, pre,
            a, abbr, acronym, address, big, cite, code,
            del, dfn, em, img, ins, kbd, q, s, samp,
            small, strike, strong, sub, sup, tt, var,
            b, u, i, center,
            dl, dt, dd, ol, ul, li,
            fieldset, form, label, legend,
            table, caption, tbody, tfoot, thead, tr, th, td,
            article, aside, canvas, details, embed,
            figure, figcaption, footer, header, hgroup,
            menu, nav, output, ruby, section, summary,
            time, mark, audio, video {
              margin: 0;
              padding: 0;
              border: 0;
              font-size: 100%;
              font: inherit;
              vertical-align: baseline; }

            /* HTML5 display-role reset for older browsers */
            article, aside, details, figcaption, figure,
            footer, header, hgroup, menu, nav, section {
              display: block; }

            body {
              line-height: 1; }

            ol, ul {
              list-style: none; }

            blockquote, q {
              quotes: none; }

            blockquote:before, blockquote:after,
            q:before, q:after {
              content: '';
              content: none; }

            table {
              border-collapse: collapse;
              border-spacing: 0; }

            html {
              font-size: 100px; }

            body {
              font-size: 20px; }

            a {
              text-decoration: none; }
            .pc {
                padding: 0;
                margin: 0;
                position: absolute;
                left: 0;
                top: 0;
                bottom: 0;
                right: 0;
            }
            .mobile-android{
                padding: 0;
                margin: 0;
                position: absolute;
                left: 0;
                top: 0;
                bottom: 0;
                right: 0;
                background: #ff0000;
            }
            .mobile-ios{
                padding: 0;
                margin: 0;
                position: absolute;
                left: 0;
                top: 0;
                bottom: 0;
                right: 0;
                background: #ff0000;
            }
            .bg {
                position:fixed;
                padding: 0;
                margin: 0;
                background-color: #fffbf4; 
                width: 100%;
                height: 100%;
                align-items: center;
                display: flex;
                flex-direction: column;
            }
            .bg-pc {
                background-color: #fffbf4; 
                width: 100%;
                height: 100%;
                align-items: center;
                display: flex;
                flex-direction: column;
            }
            .top {
                width: 100%;
                height: 903px;
                display: flex;
                flex-direction: row;
                align-items: center;
                margin-top: 100px;
                margin-bottom: 100px;
            }
            .effect {
                margin-left: 14%;
                width: 25%;
                height: auto;
            }
            .top-right {
                margin-top: 156px;
                margin-left: 11%;
                flex: 1;
                height: 360px;
            }
            .center {
                width: 100%;
                height: auto;
                background-color: #ecf2f0;
            }
            .center img {
                margin-left: 10%;
                width: 80%;
                height: auto;
            }
            .top-right-icon {
                display: flex;
                flex-direction: row;
            }
            .icon-pc {
                width:52px;
                height: 52px;
            }
            .title-pc {
                color: #323232;
                font-size: 30px;
                height: 52px;
                line-height: 52px;
                margin-left: 21px;
            }
            .slogan-pc {
                color: #000000;
                font-size: 40px;
                height: 40px;
                margin-top: 28px;
            }
            .download-box {
                height: 68px;
                margin-top: 38px;
                display: flex;
                flex-direction: row;
            }
            .download-pc {
                background-color: #ffffff;
                color: #000000;
                font-size: 18px;
                width: 198px;
                height: 68px;
                border-radius:10px;
                display: flex;
                flex-direction: row;
                align-items: center;
                box-shadow: 5px 5px 20px #eaeaea;
            }
            .download-pc span{
                color: #000000;
                font-size: 18px;
                width: 72px;
                height: 68px;
                line-height: 68px;
                margin-left: 22px;
            }
            .download-pc img {
                width: 23px;
                height: 23px;
                margin-left: 40px;     
            }
            .download-android {
                margin-left: 19px;
            }
            .bottom{
                padding-top: 90px;
                width: 100%;
                height: 464px;
                align-items: center;
                display: flex;
                flex-direction: column;
            }
            .title-bottom {
                margin-left: 0px;
                margin-top: 14px;
            }
            .copyright {
                width: 100%;
                height: 100px;
                display: flex;
                flex-direction: row;
                align-items: center;
                font-size: 16px;
                color: #888888;
                justify-content: center;
                margin-bottom: 50px;
            }
            .copyright a {
                margin-left: 20px;
            }
            .preview-image {
                width:50%;
                height: auto;
                margin-top: 116px;
            }
            .preview-image-pc {
                width:20%;
                height: auto;
                margin-top: 20px;
            }
            .icon {
                margin-top: 36px;
                width: 44px;
                height: 44px;
                border-radius: 22px;
            }
            .title{
                color: #323232;
                font-size: 22px;
                margin-top: 9px;
                height: 30px;
            }
            .slogan {
                color: #000000;
                font-size: 16px;
                height: 22px;
                margin-top: 8px;
            }
            .download {
                margin-top: 20px;
                background-color: #d1a76b;
                color: #ffffff;
                width: 143px;
                height: 50px;
                border-radius:25px;
                line-height: 50px;
                text-align: center;
            }
            .tips {
                margin-top:10px;
                color: #6f451d;
                height: 14px;
                font-size: 10px;
            }
            .hidden {
                visibility: hidden;
            }
            .visible {
                visibility: visible;
            }
        </style>
    </head>
    <body cz-shortcut-listen="true">
        <div class="pc">
            <div class="bg-pc">
                <div class="top">
                    <img src="static/effect.png" class="effect" />
                    <div class="top-right">
                        <div class="top-right-icon">
                            <img src="static/icon.png" class="icon-pc"/>
                            <div class="title-pc">格子酱</div>
                        </div>
                        <div class="slogan-pc">JK 格裙专属设计工具</div>
                        <div class="download-box">
                            <a href="https://apps.apple.com/us/app/id1519396353" class="download-pc download-ios">     
                              <img src="static/apple.png"/>
                              <span>苹果下载</span>
                            </a> 
                            <a href="http://oss.imjk.club/gezijiang_v1.0.0.apk" class="download-pc download-android">     
                              <img src="static/apple.png"/>
                              <span>安卓下载</span>
                            </a>  
                        </div>
                    </div>
                </div>
                <div class="center">
                    <img src="static/content.png">
                </div>
                <div class="bottom">
                    <img src="static/icon.png" class="icon-pc"/>
                    <div class="title-pc title-bottom">格子酱</div>
                    <div class="download-box">
                        <a href="https://apps.apple.com/cn/app/id1519396353" class="download-pc download-ios">     
                          <img src="static/apple.png"/>
                          <span>苹果下载</span> 
                        </a> 
                        <a href="http://oss.imjk.club/gezijiang_v1.0.0.apk" class="download-pc download-android">     
                          <img src="static/apple.png"/>
                          <span>安卓下载</span>  
                        </a>  
                    </div>
                    <div class="copyright">
                        <span class="company">©<span class="js-year">2020</span> 格子酱</span>
                        <a target="_blank">闽ICP备20006304号</a>
                    </div>
                </div>
            </div>
        </div>
        <!-- 移动端 -->
        <div class="mobile-android">
            <div class="bg">
                <img src="static/preview_image.png" class="preview-image" />
                <img src="static/icon.png" class="icon"/>
                <div class="title">格子酱</div>
                <div class="slogan">JK 格裙专属设计工具</div>
                <a class="download" href="http://oss.imjk.club/gezijiang_v1.0.0.apk">点击下载</a>
                <div class="tips">* 限时免费，仅限格柄设计师使用</div>
            </div>
        </div>
        <div class="mobile-ios">
            <div class="bg">
                <img src="static/preview_image.png" class="preview-image" />
                <img src="static/icon.png" class="icon"/>
                <div class="title">格子酱</div>
                <div class="slogan">JK 格裙专属设计工具</div>
                <a class="download" href="https://apps.apple.com/cn/app/id1519396353">点击下载</a>
                <div class="tips">* 限时免费，仅限格柄设计师使用</div>
            </div>
        </div>
        <script>
            ;(function(win,doc){
                var docEl = doc.documentElement;

                var toggle = function (){
                    var isIPad = /ipad/gi.test(navigator.userAgent);
                    var width = docEl.getBoundingClientRect().width;
                    if (isIPad || width <= 960) {
                        var isIphone = /(iPhone|iPod|iOS)/i.test(navigator.userAgent);
                        if (isIphone) {
                            document.querySelector('.pc').className = 'pc hidden';
                            document.querySelector('.mobile-android').className = 'mobile-android hidden';
                            document.querySelector('.mobile-ios').className = 'mobile-ios visible';
                        } else {
                            document.querySelector('.pc').className = 'pc hidden';
                            document.querySelector('.mobile-android').className = 'mobile-android visible';
                            document.querySelector('.mobile-ios').className = 'mobile-ios hidden';
                        }
                    } else {
                        document.querySelector('.pc').className = 'pc visible';
                        document.querySelector('.mobile-android').className = 'mobile-android hidden';
                            document.querySelector('.mobile-ios').className = 'mobile-ios hidden';
                    }
                }, toggleId;

                win.addEventListener('resize', function() {
                    clearTimeout(toggleId);
                    toggleId = setTimeout(toggle, 100);
                }, false);

                win.addEventListener('pageshow', function(e) {
                    if (e.persisted) {
                        clearTimeout(toggleId);
                        toggleId = setTimeout(toggle, 100);
                    }
                }, false);
                toggle();
            })(window, document);
        </script>

        <img src="static/sprite.qrcode.png" style="display: none;">
    </body>
</html>
